<template>
	<view class="index-item" @click="bindClick">
		<view v-if="datalist.class == 'noimg'" :class="datalist.class">
			<view :class="'newtitle fontsize'+fontsizenub">{{datalist.title}}</view>
			<view class="commonshow">
				<view class="seenub"><text class="'nubdata">{{datalist.uploadTime}}</text></view>
				<view class="seenub" v-if="datalist.label"><text class="'nubdata">{{datalist.label}}</text></view>
			</view>
		</view>
		<view v-if="datalist.class == 'frist-img'" class="oneimg"> 
			<view class="frist-img">
				<view class="firstimgbox">
					<image :src="localurl+datalist.picture" mode="widthFix"></image>
				</view>
				<view class="fristinfo">
					<view :class="'newtitle fontsize'+fontsizenub">{{datalist.title}}</view>
					<view class="commonshow">
						<view class="seenub"><text class="'nubdata">{{datalist.uploadTime}}</text></view>
						<view class="seenub" v-if="datalist.label"><text class="'nubdata">{{datalist.label}}</text></view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="datalist.class == 'oneimg'"  :class="[datalist.class,'oneimger']">
			<view class=".imgfather">
				<image :src="localurl+datalist.picture" class="imageonly"/></image>
			</view>
			<view class="oneimgbox">
				<view :class="'newtitle fontsize'+fontsizenub">{{datalist.title}}</view>
				<view class="commonshow">
					<view class="seenub"><text class="'nubdata">{{datalist.uploadTime}}</text></view>
					<view class="seenub" v-if="datalist.label"><text class="'nubdata">{{datalist.label}}</text></view>
				</view>
			</view>
		</view>
		<view v-if="datalist.class == 'threeimg'" :class="[datalist.class]">
			<view :class="'newtitle fontsize'+fontsizenub">{{datalist.title}}</view>
			<view class="threeimgbox">
				<view class="smbox">
					<image :src="localurl+datalist.picture"/></image>
				</view>
				<view class="smbox">
					<image :src="localurl+datalist.picture1"/></image>
				</view>
				<view class="smbox">
					<image :src="localurl+datalist.picture2"/></image>
				</view>
			</view>
			<view class="commonshow">
				<view class="seenub"><text class="'nubdata">{{datalist.uploadTime}}</text></view>
				<view class="seenub" v-if="datalist.label"><text class="'nubdata">{{datalist.label}}</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {common} from '@/common/publish.js';
	import {mapState,mapMutations} from 'vuex';
    export default {
		name: 'uni-media-list',
        props: {
            datalist: {
                type: Object
            }
        },
		data(){
			return{
				localurl:common.url,
			}
		},
        computed: {
			...mapState(['fontsizenub'])
        },
        methods: {
            close(e) {
                this.$emit('close');
            },
            bindClick() {
                this.$emit('click',this.datalist.id,this.datalist.articleType,this.datalist.link);
            }
        },
		mounted(){
			
		}
    }
</script>

<style lang="scss">
	@import '@/common/publish.scss';
	@include fontsizefn(".zbtt",32upx);
	@include fontsizefn(".newtitle",32upx);
	.nubdata{
		font-size:28upx;
	}
    view {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }

    .list-cell {
        width: 750upx;
        padding: 0 30upx;
    }

    .uni-list-cell-hover {
        background-color: #eeeeee;
    }

    .media-list {
        flex: 1;
        flex-direction: column;
        border-bottom-width: 1upx;
        border-bottom-style: solid;
        border-bottom-color: #c8c7cc;
        padding: 20upx 0;
    }

    .media-image-right {
        flex-direction: row;
    }

    .media-image-left {
        flex-direction: row-reverse;
    }

    .media-title {
        flex: 1;
    }

    .media-title {
        lines: 3;
        text-overflow: ellipsis;
        font-size: 1rem;
        color: #555555;
    }

    .media-title2 {
        flex: 1;
        margin-top: 6upx;
        line-height: 40upx;
    }

    .image-section {
        margin-top: 20upx;
        flex-direction: row;
        justify-content: space-between;
    }

    .image-section-right {
        margin-top: 0upx;
        margin-left: 10upx;
        width: 225upx;
        height: 146upx;
    }

    .image-section-left {
        margin-top: 0upx;
        margin-right: 10upx;
        width: 225upx;
        height: 146upx;
    }

    .image-list1 {
        width: 690upx;
        height: 481upx;
    }

    .image-list2 {
        width: 225upx;
        height: 146upx;
    }

    .image-list3 {
        width: 225upx;
        height: 146upx;
    }

    .media-info {
        flex-direction: row;
    }

    .info-text {
        margin-right: 20upx;
        color: #999999;
        font-size: 24upx;
    }

    .media-foot {
        margin-top: 20upx;
        flex-direction: row;
        justify-content: space-between;
    }

    .max-close-view {
        align-datas: center;
        justify-content: flex-end;
        flex-direction: row;
        height: 40upx;
        width: 80upx;
    }

    .close-view {
        border-style: solid;
        border-width: 1px;
        border-color: #999999;
        border-radius: 10upx;
        justify-content: center;
        height: 30upx;
        width: 40upx;
        line-height: 30upx;
    }

    .close {
        text-align: center;
        color: #999999;
        font-size: 28upx;
    }
</style>
